<template>
  <!-- 登录页面 -->
  <div id="login">
    <el-tabs class="container-tabs">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-user-solid"></i> 登录</span>
        <el-form ref="loginForm" :rules="loginRules" :model="loginForm" label-position="left" status-icon
          class="login-form" label-width="80px" size="medium">
          <div class="login-form-body">
            <el-form-item prop="username" label="用户名" class="login-form-body-label-username">
              <el-input type="text" auto-complete="true" v-model="loginForm.username" placeholder="请输入用户名"
                prefix-icon="el-icon-user" class="login-form-body-input-username"></el-input>
            </el-form-item>

            <el-form-item prop="password" label="密码" class="login-form-body-label-password">
              <el-input type="password" auto-complete="true" v-model="loginForm.password" placeholder="请输入密码"
                prefix-icon="el-icon-lock" show-password class="login-form-body-input-password">
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitLogin" class="login-form-body-submit">登陆
              </el-button>
              <el-button class="login-form-body-forget">忘记密码</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-user"></i> 注册</span>
        <el-form ref="registerForm" :rules="registerRules" :model="registerForm" label-position="left" status-icon
          class="register-form" label-width="80px" size="medium">
          <div class="register-form-body">
            <el-form-item prop="username" label="用户名" class="register-form-body-label-username">
              <el-input type="text" auto-complete="true" v-model="registerForm.username" placeholder="请输入用户名"
                prefix-icon="el-icon-user" class="register-form-body-input-username"></el-input>
            </el-form-item>

            <el-form-item prop="password" label="密码" class="register-form-body-label-password">
              <el-input type="password" auto-complete="true" v-model="registerForm.password" placeholder="请输入密码"
                prefix-icon="el-icon-lock" show-password class="register-form-body-input-password">
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitRegister" class="register-form-body-submit">提交
              </el-button>
              <el-button type="info" @click="resetForm('registerForm')">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
    login,
    accessToken
} from '@/api/auth'
import {
    Message
} from 'element-ui'

export default {
    name: 'LoginIndex',
    data () {
        return {
            // 登录表单
            loginForm: {
                username: '',
                password: ''
            },
            // 注册表单
            registerForm: {
                username: '',
                password: ''
            },
            // 登录表单验证
            loginRules: {
                username: [{
                    required: true,
                    message: '用户名不能为空',
                    trigger: 'change'
                }],
                password: [{
                    required: true,
                    message: '密码不能为空',
                    trigger: 'change'
                }]
            },
            // 注册表单验证
            registerRules: {
                username: [{
                    required: true,
                    message: '用户名不能为空',
                    trigger: 'change'
                }],
                password: [{
                    required: true,
                    message: '密码不能为空',
                    trigger: 'change'
                }]
            }
        }
    },
    methods: {
    // 登录提交
        submitLogin () {
            this.$refs.loginForm.validate(valid => {
                // 表单校验
                if (valid) {
                    let form = {
                        username: this.loginForm.username,
                        password: this.loginForm.password
                    }

                    // 获取access_token
                    accessToken(form).then((authResponse) => {
                        if (authResponse.code === 200) {
                            let token = authResponse.data.access_token
                            window.sessionStorage.setItem('access_token', token)

                            // 登陆
                            login(form).then((loginResponse) => {
                                if (loginResponse.code === 200) {
                                    let data = loginResponse.data
                                    window.sessionStorage.setItem('userInfo', JSON.stringify(data))

                                    // tip信息提示
                                    Message.success({
                                        message: loginResponse.message
                                    })

                                    // 跳转首页
                                    this.$router.push({
                                        path: '/'
                                    })
                                } else {
                                    // tip信息提示
                                    Message.warning({
                                        message: loginResponse.message
                                    })
                                    return false
                                }
                            })
                        } else {
                            // tip信息提示
                            Message.warning({
                                message: authResponse.message
                            })
                            return false
                        }
                    })
                } else {
                    return false
                }
            })
        },

        // 注册提交
        submitRegister () {
            this.$refs.registerForm.validate(valid => {
                if (valid) {
                    let form = {
                        username: this.registerForm.username,
                        password: this.registerForm.password
                    }
                    console.log(form)

                    // 跳转首页
                    this.$router.push({
                        path: '/'
                    })
                } else {
                    return false
                }
            })
        },

        // 表单重置
        resetForm (formName) {
            this.$refs[formName].resetFields()
        }
    },
    mounted () {
    }
}
</script>

<style scoped>
#login {
  margin: 0px;
  width: 100%;
  height: 100%;
  /* background-color: #444444; */
  background: url('../assets/images/bg_scenery.jpg') no-repeat;
  background-size: 100% 100%;
}

.container-tabs {
  margin: 0%;
  padding: 3%;
  width: 25%;
  height: 24%;
  position: absolute;
  left: 35%;
  top: 25%;
  background-color: white;
  border-radius: 5px;
}

.login-form {
  width: 100%;
  height: 100%;
}

.login-form-body {
  padding: 5px;
}

.register-form {
  width: 100%;
  height: 100%;
}

.register-form-body {
  padding: 5px;
}
</style>
